<template>
	<view class="tools-bar-fix">
		<!-- 购物车列表 -->
		<view class="cart-list">
			<up-checkbox-group v-model="selected_goods">
				<up-swipe-action>
					<up-swipe-action-item v-for="(goods,index) in cart_list" @click="handleSwipe" :index="index"
						:name="index" :key="goods.id" :options="[{text:'删除'}]">
						<up-cell-group>
							<up-cell>
								<template #icon>
									<up-checkbox :name="goods.id" active-color="#c55a5c" class="checkbox"></up-checkbox>
								</template>
								<template #title>
									<navigator url="../goods/detail/detail" class="photo">
										<up-image :src="goods.img" width="196rpx" height="190rpx"></up-image>
									</navigator>
								</template>
								<template #right-icon>
									<view class="goods">
										<view class="right">
											<navigator url="../goods/detail/detail">
												<up-text :text="goods.name" size="26rpx" color="#555"
													lines="2"></up-text>
											</navigator>
											<up-text :text="goods.word" margin="10rpx 0 11rpx 0" size="20rpx"
												color="#999" lines="1"></up-text>
											<view class="counter-box">
												<up-text :text="goods.price" mode="price" size="28rpx" color="#c55a5c"
													lines="1"></up-text>
												<up-number-box v-model="goods.count" button-size="25"></up-number-box>
											</view>
										</view>
									</view>
								</template>
							</up-cell>
						</up-cell-group>
					</up-swipe-action-item>
				</up-swipe-action>
			</up-checkbox-group>
		</view>
		<!-- 间隔槽 -->
		<up-gap height="10" bgColor="#f4f4f4"></up-gap>
		<!-- 猜你喜欢 -->
		<view class="section">
			<view class="title">
				<u--text text="猜你喜欢" size="28rpx" color="#333" align="center"></u--text>
				<u-line length="50rpx" margin="6rpx 0"></u-line>
				<u--text text="RECOMMEND" size="12rpx" color="#666" align="center"></u--text>
			</view>
			<!-- 列表 -->
			<view class="goods-list">
				<navigator url="../goods/detail/detail" v-for="goods in recommend_list" :key="goods.id" class="goods">
					<view class="photo">
						<up-image :src="goods.photo" width="315rpx" height="275rpx"></up-image>
					</view>
					<u--text :text="goods.name" margin="16rpx 0" lines="1" size="26rpx" color="#555"></u--text>
					<u--text :text="goods.word" lines="1" size="20rpx" color="#999"></u--text>
					<u--text :text="goods.price" mode="price" margin="33rpx 0 0 0" size="26rpx" color="#c55a5c">
					</u--text>
				</navigator>
			</view>
		</view>
		<!-- 底部工具条 -->
		<view class="tools-bar">
			<view class="check_all">
				<u-checkbox-group v-model="checked_all">
					<u-checkbox :name="true" active-color="#c55a5c" label="全选"></u-checkbox>
				</u-checkbox-group>
			</view>
			<u--text :text="total_cost" mode="price" margin="0 20rpx 0 0" size="28rpx" color="#c55a5c" bold
				align="right"></u--text>
			<view class="settle-button">
				<u-button :disabled="selected_goods.length === 0" text="结 算" color="#c55a5c"></u-button>
			</view>
		</view>
		<!-- 删除Modal -->
		<u-modal :show="remove_visible" @confirm="handleRemove" @cancel="remove_visible = false" content="确定要删除此商品吗？"
			show-cancel-button>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	//删除model 状态
	let remove_visible = ref(false)
	let current_index = ref(-1)
	const selected_goods = ref([])

	let cart_list = ref([{
			id: 1,
			img: 'http://resources.codeinn.cn/img-1.png',
			name: '高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖',
			word: '一件能明显提升幸福感的小物件',
			price: 61.9,
			count: 2,
		},
		{
			id: 2,
			img: 'http://resources.codeinn.cn/img-2.png',
			name: '28寸 纯PC”铝矿”（非全铝）拉杆箱',
			word: '国画四色 诠释最美器具',
			price: 261.9,
			count: 1,
		},
		{
			id: 3,
			img: 'http://resources.codeinn.cn/img-3.png',
			name: '高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖',
			word: '一件能明显提升幸福感的小物件',
			price: 45.9,
			count: 1,
		}, {
			id: 4,
			img: 'http://resources.codeinn.cn/img-4.png',
			name: '瓦尔塔婆婆飒飒考虑瓦尔塔婆婆飒飒考虑瓦尔塔婆婆飒飒考虑瓦尔塔婆婆飒飒考虑',
			word: '委屈哦iu日哦诶哦尽快好卡',
			price: 87.9,
			count: 1,
		}, {
			id: 5,
			img: 'http://resources.codeinn.cn/img-5.png',
			name: '高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖',
			word: '一件能明显提升幸福感的小物件',
			price: 5.9,
			count: 3,
		}, {
			id: 6,
			img: 'http://resources.codeinn.cn/img-6.png',
			name: '高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖',
			word: '一件能明显提升幸福感的小物件',
			price: 78.9,
			count: 1,
		}
	])
	let recommend_list = ref([{
			id: 1,
			photo: 'http://resources.codeinn.cn/t (1).png',
			name: "狐步小吊灯",
			word: "曼妙裙摆 任意空间的光线舞者",
			price: 469,
		},
		{
			id: 2,
			photo: 'http://resources.codeinn.cn/t (2).png',
			name: "折简餐具组|碗套装",
			word: "国画四色 诠释最美器具",
			price: 89,
		},
		{
			id: 3,
			photo: 'http://resources.codeinn.cn/t (3).png',
			name: "竹枝抱枕",
			word: "上百竹枝首尾相依 静生生物",
			price: 169,
		},
		{
			id: 4,
			photo: 'http://resources.codeinn.cn/t (4).png',
			name: "澎湃声波牙刷 Pro",
			word: "一件能明显提升幸福感的小物件",
			price: 259,
		}
	])

	const total_cost = computed(() => {
		return cart_list.value.reduce((total, goods, index) => {
			// 判断商品是否选中
			let is_checked = selected_goods.value.includes(goods.id);
			if (is_checked) {
				return total + goods.price * goods.count;
			} else {
				return total;
			}
		}, 0)
	})
	const checked_all = computed({
		get() {
			// 判断是否全部选中
			let is_all_checked = selected_goods.value.length === cart_list.value.length;
			return [is_all_checked];
		},
		set(newValue) {
			// 全选的状态
			let is_all_checked = newValue.length > 0;
			if (is_all_checked) {
				// 全部选中
				selected_goods = cart_list.value.map((goods) => goods.id);
			} else {
				// 全部取消选中
				selected_goods = [];
			}
		}
	})
	
	const handleSwipe = () => {
		remove_visible.value = true
	}
	const handleRemove = () => {
		
	}
</script>

<style scoped lang="scss">
	.cart-list .goods {
		display: flex;
		align-items: center;
	}

	.cart-list .goods .photo {
		width: 200rpx;
		flex-basis: 200rpx;
		flex-shrink: 0;
	}

	.cart-list .goods .counter-box {
		display: flex;
	}

	/* 猜你喜欢 */
	.section .title {
		padding: 25rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section .goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.section .goods-list .goods {
		flex: 1;
		border-top: 2rpx solid #f5f5f5;
		border-right: 2rpx solid #f5f5f5;
		padding: 24rpx;
		padding-bottom: 42rpx;
	}

	.section .goods:nth-child(2n) {
		border-right: none;
	}

	/* 工具条 */
	.tools-bar {
		position: fixed;
		left: 0;
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		border-top: 1rpx solid #eee;
		z-index: 1000;
	}

	/* #ifdef H5 */
	.tools-bar {
		bottom: 96rpx;
	}

	/* #endif */

	/* #ifndef H5 */
	.tools-bar {
		bottom: 0rpx;
	}

	/* #endif */

	.tools-bar .check_all {
		padding: 20rpx;
	}

	.tools-bar .settle-button {
		flex: 1;
	}

	.tools-bar-fix {
		padding-bottom: 80rpx;
	}
</style>